<template>
  <div class="index">
    <!-- 头部标题 -->
    <van-nav-bar title="主页" fixed class="i-title" />
    <!-- 频道区域 -->
    <van-tabs v-model="active" sticky offset-top="46px">
      <van-tab v-for="(item, index) in channelList" :title="item.name" :key="index" >
        <!-- 频道下的文章区域 -->
        <!-- 上拉刷新 -->
        <van-pull-refresh v-model="item.isLoading" success-text="刷新成功" @refresh="onRefresh">
        <!-- 下拉加载 -->
        <van-list v-model="item.loading" :finished="item.finished" finished-text="没有更多了" @load="onLoad">
          <van-cell class="myheight" v-for="(subitem, subindex) in item.articleList" :key="subindex">
            <!-- 文章渲染 -->
            <template #title>
              <h3>{{ subitem.title }}</h3>
              <van-grid :border="false" v-if="subitem.cover.type !== 0" :column-num = "3">
                <van-grid-item v-for="(imgitem, imgindex) in subitem.cover.images" :key="imgindex">
                  <van-image v-lazy="imgitem" :src="imgitem" />
                </van-grid-item>
              </van-grid>
              <div class="title">
                <div class="left">
                <span>{{ subitem.aut_name }}</span>
                <span>{{ subitem.comm_count }}评论</span>
                <span>{{ subitem.pubdate | timefilter }}</span>
              </div>
              <div class="right">
                <van-icon name="cross"  @click="openMore(subitem)"/>
              </div>
              </div>
            </template>
          </van-cell>
        </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <div class="channelBtn" @click="channelPop">
      <van-icon name="wap-nav" />
    </div>
    <!--频道弹窗 -->
    <!-- 添加一个频道操作的弹出层: 在 vue 中组件既可以以单标签存在也可以以双标签存在 -->
    <!-- <channel ref="mychannel" :channelList="channelList" :active="active" @update:active="e => active=e" /> -->
    <channel ref="channel" :channelList="channelList" :active.sync="active"></channel>
    <!-- 如果一个属性与子组件是双向绑定的关系： -->
    <!-- 传入时使用 :xxx="value" -->
    <!-- 返回时使用事件： update:xxx -->
    <!-- 那么以上写可以简写为 :xxx.sync="value" -->
    <more ref="more" :artId="artId" :autId = "autId" @delDislike="delDislike"/>
  </div>
</template>

<script>
import { apiChannelData } from '@/api/channel.js'
import { localGet } from '@/utils/mylocal.js'
import { apiArticleList } from '@/api/article.js'
import channel from './com/channel.vue'
import more from './com/more.vue'
export default {
  components: {
    channel,
    more
  },
  data () {
    return {
      // loading: false,
      // finished: false,
      // list: [],
      // isLoading: false,
      channelList: [],
      active: 0,
      // 文章id
      artId: 0,
      // 作者id
      autId: 0
    }
  },
  methods: {
    // 删除文章
    delDislike (id) {
      this.channelList[this.active].articleList.forEach((item, index) => {
        if (item.art_id === id) {
          // 将当前元素删除
          this.channelList[this.active].articleList.splice(index, 1)
        }
      })
    },
    // 打开弹窗
    openMore (item) {
      this.$refs.more.show = true
      this.artId = item.art_id
      this.autId = item.aut_id
    },
    // 下拉
    async onLoad () {
      // console.log('onLoad')
      // var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
      // // 给list动态赋值
      // this.list = [...this.list, ...arr]
      // window.console.log(this.list.length)
      // // 设置加载状态
      // this.loading = false
      // if (this.list.length >= 100) {
      //   // 设置加载完毕的标识
      //   this.finished = true
      // }
      // 得到当前选中的频道
      const currentChannel = this.channelList[this.active]
      // 得到当前选中的频道的id
      const id = currentChannel.id
      // 发送请求到服务器
      const res = await apiArticleList(id)
      window.console.log('文章数据', res)
      // 保存文章数据
      currentChannel.articleList = [...currentChannel.articleList, ...res.data.data.results]
      if (res.data.data.results.length === 0) {
        currentChannel.finished = true
      }
      window.console.log(currentChannel.articleList.length)
      // 将list的加载状态设置为false
      currentChannel.loading = false
    },

    // 上拉
    async onRefresh () {
      // window.console.log('onRefresh')
      // setInterval(() => {
      //   this.isLoading = false
      // }, 1000)
      // this.list = []
      // -------------页面不出现空白----------------
      // 得到当前选中的频道的id
      const currentChannel = this.channelList[this.active]
      // 先得到服务器获得新数据
      const res = await apiArticleList(currentChannel.id)
      // 将新数据赋值给老数据
      currentChannel.articleList = res.data.data.results
      currentChannel.loading = false
      currentChannel.finished = false
      currentChannel.isLoading = false
      // ---------------页面会出现空白----------------
      /**
      * 得到当前选中的频道的id
      const currentChannel = this.channelList[this.active]
      清除当前频道下的所有数据
      currentChannel.articleList = []
      currentChannel.loading = false
      currentChannel.finished = false
      currentChannel.isLoading = false
      重新加载数据
      this.onLoad()
      this.onLoad()
      */
    },

    // 打开频道
    channelPop () {
      this.$refs.channel.show = true
    },

    // 获取数据
    async getChannel () {
      // 得到token
      const token = this.$store.state.userInfo.token
      // 判断是否登录
      if (token) {
        const res = await apiChannelData()
        window.console.log(res)
        this.channelList = res.data.data.channels
        window.console.log(this.channelList)
      } else {
        // 从localstoreage中得到数据
        const localChannel = localGet('channels')
        // 判断localstoreage中是否存在数据
        if (localChannel) {
          this.channelList = localChannel
        } else {
          // 从未进入直接从服务器获得数据
          const res = await apiChannelData()
          this.channelList = res.data.data.channels
        }
      }
      // 得到数据后给每个频道数据添加额外属性
      this.addOtherProp()
      window.console.log(this.channelList)
    },
    // 添加数据
    addOtherProp () {
      // 遍历数组
      this.channelList.forEach(item => {
        // // 添加到当前频道文章列表
        // item.articleList = []
        // $set添加动态响应式
        this.$set(item, 'articleList', [])
        // // 添加list 加载状态
        // item.loading = false
        this.$set(item, 'loading', false)
        // // 添加完结状态
        // item.finished = false
        this.$set(item, 'finished', false)
        // // 添加下拉属性
        // item.isLoading = false
        this.$set(item, 'isLoading', false)
      })
    },
    updateactive (e) {
      this.active = e
    }
  },
  created () {
    this.getChannel()
  }
}
</script>
<style lang="less" scoped>
.index {
  margin-top: 46px;
  margin-bottom: 50px;
  .i-title {
    background-color: #3e9df8;
    /deep/ .van-nav-bar__title {
      color: #fff;
    }
  }
  .channelBtn {
    position: fixed;
    top: 46px;
    right: 0px;
    z-index: 999;
    width: 10%;
    height: 44px;
    background-color: skyblue;
    text-align: center;
    line-height: 44px;
  }
  /deep/ .van-sticky {
      width: 90%;
  }
  .mycell {
    height: 100px;
  }
  .title {
    display: flex;
    justify-content: space-between;
    .left {
      span {
        margin-right: 10px;
      }
    }
    .right {
      border: 1px solid #ccc;
      width: 30px;
      height: 20px;
      text-align: center;
      background-color:orange
    }
  }
}
</style>
